<div class="box-iframe-root">

  <iframe [id]="scrnIndexID" class="box-iframe" [src]="viewData.url?viewData.url:'javascript:;'"
          (error)="onError()"
          (load)="onLoad()"
          [name]="scrnIndexID"
          [style.display]="viewData.isLoading||!this.viewData.inputDefineURL||!this.viewData.isShowFrame||this.viewData.isError?'none':'block'">

  </iframe>

  <div class="box-setting"
       *ngIf="this.viewData.inputDefineURL&&!this.viewData.isLoading&&!this.viewData.isShowFrame&&!this.viewData.isError">
    已配置：<br/>{{this.viewData.inputDefineURL}}
    <div style="margin: 20px 20px">由于源站可能禁止iframe嵌套，<br/>您需要搭配chrome插件 <a
      href="https://github.com/xuefengnice/MoreSearch/blob/master/how-use.md" target="_blank">iHeader</a> 一起使用：）
    </div>
  </div>

  <div class="box-no-setting" *ngIf="!this.viewData.inputDefineURL">暂无配置
    <div style="margin: 20px 20px;font-size: 12px;font-weight: 400">由于源站可能禁止iframe嵌套，<br/>您需要搭配chrome插件 <a
      href="https://github.com/xuefengnice/MoreSearch/blob/master/how-use.md" target="_blank">iHeader</a> 一起使用：）
    </div>
  </div>

  <div class="box-loading" [style.display]="viewData.isLoading?'flex':'none'">
    <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="30px" viewBox="0 0 24 30"
         style="enable-background:new 0 0 50 50" xml:space="preserve">
    <rect x="0" y="0" width="4" height="10" fill="#FF6700" transform="translate(0 9.4336)">
        <animateTransform attributeType="xml" attributeName="transform" type="translate" values="0 0; 0 20; 0 0"
                          begin="0" dur="0.6s" repeatCount="indefinite"></animateTransform>
    </rect>
      <rect x="10" y="0" width="4" height="10" fill="#FF6700" transform="translate(0 17.2331)">
        <animateTransform attributeType="xml" attributeName="transform" type="translate" values="0 0; 0 20; 0 0"
                          begin="0.2s" dur="0.6s" repeatCount="indefinite"></animateTransform>
    </rect>
      <rect x="20" y="0" width="4" height="10" fill="#FF6700" transform="translate(0 3.89973)">
        <animateTransform attributeType="xml" attributeName="transform" type="translate" values="0 0; 0 20; 0 0"
                          begin="0.4s" dur="0.6s" repeatCount="indefinite"></animateTransform>
    </rect>
    </svg>
  </div>
  <img class="btn-config" src="assets/img/config.png" (click)="onClick_config()"/>
  <img class="btn-go" src="assets/img/go.png" (click)="onClick_go()"/>

  <div class="dialog-bg" *ngIf="viewData.isShowDialog" (click)="setIsShowDialog(false)">
    <div class="dialog-content" (click)="onDialogContentClick($event)">
      <p>请配置搜索引擎链接：</p>
      <div class="box-input">
        <input type="text" placeholder="比如:http://www.baidu.com/s?wd={query}" [(ngModel)]="viewData.inputDefineURL"/>
        <button (click)="onClick_show_select($event)">选择常用</button>
      </div>
      <div class="box-btns">
        <button class="btn" (click)="setIsShowDialog(false)">取消</button>
        <button class="btn" (click)="onClick_ok()">确定</button>
        <div class="box-select-items" *ngIf="viewData.isShowSelect">
          <div class="item" *ngFor="let item of viewData.selectItems" (click)="onClick_select_item($event,item)">{{item.name}}</div>
        </div>
      </div>
    </div>
  </div>
</div>
